<template>
  <div class="addCNAsthmaTemplate-container">
    <el-form label-width="100px" ref="formRef" :model="form">
      <section class="info-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <xm-f-radio
              quick
              prop="type"
              v-model="form.type"
              label="模板类型"
              :options="templateTypes"
            ></xm-f-radio>
          </el-col>
          <el-col :span="8">
            <xm-f-intput
              quick
              prop="templateName"
              v-model="form.templateName"
              label="模板名称:"
            ></xm-f-intput>
          </el-col>
          <el-col :span="8">
            <xm-f-intput
              quick
              prop="diseaseType"
              v-model="form.diseaseType"
              label="疾病类型:"
            ></xm-f-intput>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <xm-f-intput
              type="textarea"
              v-model="form.remark"
              label="模板说明:"
              quick
              prop="remark"
            ></xm-f-intput>
          </el-col>
        </el-row>
      </section>
      <section class="info-content">
        <m-table v-model="list" ref="mtRef"></m-table>
        <medicinal-select @selectData="selData"></medicinal-select>
      </section>
    </el-form>
    <section class="info-content foot">
      <el-button type="primary" @click="toSave">保存</el-button>
      <el-button @click="toBack">取消</el-button>
    </section>
  </div>
</template>
<script>
  import emr from '@/hooks/emr.vue'
  import { toRefs, computed, ref, onBeforeMount } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import MedicinalSelect from '@/components/MedicinalSelect'
  import MTable from '@/components/MedicinaModifylTable'
  import common from '@/utils/common'
  import { saveTemplate, loadTemplate } from '@/api/modules/prescription'
  export default {
    name: 'addPrescriptionTemplate',
    components: { MedicinalSelect, MTable },
    setup() {
      const form = ref({})
      const contentType = computed(() => {
        return 3
      })

      const acitonPlanRef = ref(null)
      const formRef = ref(null)
      const mtRef = ref(null)
      const toSave = async function () {
        const checkedList = mtRef.value.getCheckData()
        if (checkedList.length === 0) {
          common.XmMessage(3, '至少添加一条药物')
          return
        }
        formRef.value.validate((valid) => {
          if (valid) {
            common.XmLoading(true)
            const detailed = checkedList.map((item) => {
              // 适配后台 搜索id
              if (!item.drugId) item.drugId = item.id
              return item
            })
            saveTemplate({
              ...form.value,
              detailed,
              status: 2,
              id: route.query.id,
            })
              .then((res) => {
                common.XmLoading()
                common.XmMessage(0, res.message)
                toBack()
              })
              .catch(() => common.XmLoading())
          }
        })
      }
      const toLoad = async function (id) {
        const res = await loadTemplate({ id })
        const formKeys = ['type', 'templateName', 'diseaseType', 'remark']
        formKeys.map((item) => {
          form.value[item] = res.data[item]
        })
        list.value = res.data.detailed
      }

      const router = useRouter()
      const toBack = function () {
        router.go(-1)
      }

      const list = ref([])
      const selData = function (medicinal) {
        console.log('selData = ' + JSON.stringify(medicinal))
        list.value.push(medicinal)
      }
      const route = useRoute()
      onBeforeMount(() => {
        if (route.query.id) toLoad(route.query.id)
      })

      return {
        form,
        toSave,
        toBack,
        contentType,
        acitonPlanRef,
        formRef,
        selData,
        list,
        mtRef,
        ...toRefs(emr()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .addCNAsthmaTemplate-container {
    .info-content {
      margin: 22px;
      background-color: white;
      padding: 15px;
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
